<script lang="ts" setup>
import type { SiteGroup } from '@/api/SiteGroupApi.ts'
import { useSiteGroupStore } from '@/config/store/UseSiteGroupStore.ts'
import { ref, watch } from 'vue'

const props = defineProps<{
    modelValue?: string
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const siteGroupStore = useSiteGroupStore()

const selected = ref('')

const onItemClick = (item: SiteGroup) => {
    selected.value = item.id!
    emits('update:modelValue', selected.value)
}

watch(() => props.modelValue, () => selected.value = props.modelValue ?? '', { immediate: true })

</script>

<template>
<div class="select-panel">
    <div
            v-for="i in siteGroupStore.groupList"
            :key="i.id!"
            :class="{'selected': selected === i.id}"
            class="item"
            @click="() => onItemClick(i)"
    >
        {{ i.name }}
    </div>
</div>
</template>

<style lang="scss" scoped>
.select-panel {

    .item {
        cursor: pointer;
        height: 26px;
        padding: 5px 10px;
        border-bottom: 1px solid color-mix(in srgb, var(--color-fill-2), transparent 90%);

        transition: background-color ease 0.2s;
    }

    .item:hover {
        background-color: color-mix(in srgb, var(--color-fill-2), transparent 90%);
    }

    .selected {
        font-weight: bold;
        background-color: color-mix(in srgb, var(--color-fill-2), transparent 60%);
    }

}
</style>
